/* === כפתור נגישות קבוע במסך === */
#accessibility-button {
    position: fixed;
    /* מקבע את הכפתור במיקום קבוע במסך */
    bottom: 2em;
    /* מרחק מהחלק התחתון של המסך */
    right: 2em;
    /* מרחק מהחלק הימני של המסך */
    background-color: var(--primary);
    /* צבע רקע לפי משתנה */
    color: var(--text-light);
    /* צבע טקסט לפי משתנה */
    font-size: 1em;
    /* גודל פונט רגיל */
    padding: 0.75em 1.2em;
    /* ריווח פנימי של הכפתור */
    border: none;
    /* בלי מסגרת */
    border-radius: 2em;
    /* קצוות עגולים */
    z-index: 10000;
    /* מבטיח שהכפתור יופיע מעל כל האלמנטים */
    cursor: pointer;
    /* מצביע משתנה ליד */
    box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.3);
    /* צל רך */
    transition: var(--transition);
    /* מעבר חלק בעת ריחוף */
}

/* שינוי צבע בריחוף או התמקדות בכפתור */
#accessibility-button:hover,
#accessibility-button:focus {
    background-color: var(--accent);
    /* צבע רקע חדש */
    color: var(--text);
    /* צבע טקסט חדש */
}

/* === תיבת הנגישות שנפתחת בלחיצה === */
#accessibility-panel {
    display: none;
    /* מוסתרת כברירת מחדל */
    position: fixed;
    /* מקובע למיקום */
    bottom: 6em;
    /* מרחק מהחלק התחתון */
    right: 2em;
    /* מרחק מהצד הימני */
    background-color: #fff;
    /* רקע לבן */
    border: 0.1em solid #ccc;
    /* מסגרת אפורה */
    border-radius: 1em;
    /* פינות מעוגלות */
    padding: 1em;
    /* ריווח פנימי */
    box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.2);
    /* צל */
    z-index: 9999;
    /* מעל רוב האלמנטים, אבל מתחת לכפתור */
    min-width: 14em;
    /* רוחב מינימלי */
}

/* עיצוב כפתורי ההגדרות שבתוך תיבת הנגישות */
#accessibility-panel button {
    display: block;
    /* כל כפתור בשורה נפרדת */
    width: 100%;
    /* יתפוס את כל הרוחב */
    margin-bottom: 0.7em;
    /* ריווח בין כפתורים */
    font-size: 1em;
    padding: 0.6em 1em;
    background-color: var(--secondary);
    /* צבע שניוני */
    color: white;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: var(--transition);
    /* מעבר חלק */
}

/* ריחוף/פוקוס על כפתור בתיבה */
#accessibility-panel button:hover,
#accessibility-panel button:focus {
    background-color: var(--accent);
    color: #000;
    /* טקסט שחור */
}

/* === מצבי נגישות שמוחלים על body === */

/* הגדלת טקסט באתר */
body.large-text {
    font-size: 1.3em;
    /* גודל פונט גדול יותר */
}

/* מצב ניגודיות גבוהה: רקע כהה וטקסט בהיר */
body.high-contrast {
    background-color: #000 !important;
    /* רקע שחור */
    color: #FFD700 !important;
    /* טקסט צהוב */
}

/* הדגשת קישורים במצב הדגשת קישורים */
body.highlight-links a {
    background-color: #ffd700 !important;
    /* רקע צהוב */
    color: #d40000 !important;
    /* טקסט אדום */
    text-decoration: underline !important;
    font-weight: bold;
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* אלמנט כללי עם רקע ירוק וטקסט לבן */
.green-box {
    background-color: #1b5e20;
    /* ירוק כהה */
    color: #ffffff;
    /* לבן */
}

/* ריחוף על קישור רגיל */
.btn-super-link:hover {
    text-decoration: underline;
    background-color: #FFD700;
    /* רקע צהוב */
    color: #000;
    /* טקסט שחור */
}

/* כפתור במצב ניגודיות גבוהה */
body.high-contrast .btn-super-link {
    background-color: #000 !important;
    color: #FFD700 !important;
    border: 0.1em solid #FFD700;
    /* מסגרת צהובה */
}

/* ריחוף על כפתור במצב ניגודיות גבוהה */
body.high-contrast .btn-super-link:hover,
body.high-contrast .btn-super-link:focus {
    background-color: #FFD700 !important;
    color: #000 !important;
    text-decoration: underline;
}

/* הדגשת טקסט שחור על רקע לבן */
body.high-contrast .contrast-box {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: bold;
    /* text-shadow אפשר להוסיף כאן אם תרצי יותר הדגשה */
}

/* שינוי ירוק לצהוב בתוך ניגודיות גבוהה */
body.high-contrast .green-box {
    background-color: #000 !important;
    color: #FFD700 !important;
}

/* === הערות כלליות למתכנת ===
   - !important משמש כאן רק כשיש צורך לגבור על סגנונות קיימים.
   - כל מצבי הנגישות מופעלים ע"י הוספת class על תגית <body>.
   - הקפד להחזיר את כל הסגנונות למצב הרגיל בעת איפוס.
*/


/* מצב ניגודיות גבוהה: שינוי צבע לכפתורי הסופרים */
body.high-contrast .supermarket-buttons a {
    background-color: #000 !important;
    /* רקע שחור */
    color: #FFD700 !important;
    /* טקסט צהוב */
    border: 0.1em solid #FFD700;
    /* מסגרת צהובה */
}

/* ריחוף במצב ניגודיות גבוהה */
body.high-contrast .supermarket-buttons a:hover {
    background-color: #FFD700 !important;
    color: #000 !important;
    text-decoration: underline;
}

body.high-contrast h2 {
    color: #FFD700 !important;
    /* טקסט צהוב */
    background-color: #000 !important;
    /* רקע שחור */
    font-weight: bold;
    /* טקסט מודגש */
    padding: 0.5em 1em;
    /* ריווח פנימי */
    display: inline-block;
    /* כדי שהרקע לא יתפשט על כל השורה */
    border-radius: 0.3em;
    /* פינות מעוגלות */
}

body.high-contrast h1 {
    color: #FFD700 !important;
    /* טקסט צהוב */
    background-color: #000 !important;
    /* רקע שחור */
    font-weight: bold;
    /* טקסט מודגש */
    padding: 0.5em 1em;
    /* ריווח פנימי */
    display: inline-block;
    /* כדי שהרקע לא יתפשט על כל השורה */
    border-radius: 0.3em;
    /* פינות מעוגלות */
}

body.high-contrast .scroll-hint {
    color: #FFD700 !important;
    /* טקסט צהוב */
    background-color: #000 !important;
    /* רקע שחור */
    font-weight: bold;
    /* טקסט מודגש */
    padding: 0.5em 1em;
    /* ריווח פנימי */
    border-radius: 0.3em;
    /* פינות מעוגלות */
    display: inline-block;
    /* רקע רק מסביב לטקסט */
    text-align: center;
    /* שמירה על מיקום מרכזי */
    margin: 1.5em auto;
    /* שמירה על מרכז בעמוד */
}


/*הרקע יהפוך לשחור בניגודיות גבוהה*/
body.high-contrast {
  background: #000 !important;
  background-image: none !important;
  color: #FFD700 !important;
}